<template>
  <dashboard-chart :title="title" :loading="loading" :empty="empty" :option="option"></dashboard-chart>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted } from 'vue';
import dashboardChart from '../lib/dashboard-chart.vue';
import { nameMap } from "../lib/config";
import { COLOR, LEGEND, GRID } from '../lib/echart-default';
import word from "../lib/word.json";
import * as echarts from 'echarts';

export default defineComponent({
  name: 'Chart1',
  props: ['mapData'],
  components: { dashboardChart },
  setup(props, ctx) {
    const title = ref("采集数据地域分布");
    const loading = ref(false);
    const empty = ref(false);
    echarts.registerMap('world', word as any);
    const seriesData = props.mapData.map(item => {
      return {
        name: item.country,
        value: item.count
      }
    });
    const option = reactive({
      color: COLOR,
      tooltip: {
        show: true,
        trigger: "item"
      },
      visualMap: [
        {
            type: 'continuous',
            min: 0,
            max: 1000,
        }
      ],
      grid: GRID,
      series: [
        {
          type: 'map',
          name: '文章数量',
          aspectScale: 1.6,
          map: 'world',
          roam: false,
          nameMap: nameMap,
          data: seriesData
        },
      ],
    });
    return {
      title,
      loading,
      empty,
      option,
    };
  },
});
</script>
